<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '../utils/request'
import RainScene from './RainScene.vue'

// 雨滴效果参数
const rainParams = ref({
  intensity: 0.4,
  speed: 0.9,
  brightness: 0.8,
  normal: 0.5,
  zoom: 2.61,
  blurIntensity: 0.5,
  blurIterations: 16,
  panning: false,
  postProcessing: true,
  lightning: false,
  textureFill: true
})

// 控制面板显示状态
const showHeaderPanel = ref(false)
const showSidebarPanel = ref(false)

const router = useRouter()

// 图书数据
const randomBooks = ref([])
const newBooks = ref([])
const searchKeyword = ref('')

// 统计数据
const stats = ref({
  bookCount: 0,
  authorCount: 0,
  tagCount: 0
})

// 获取图书列表
const getBookList = async (isAllBooks = false) => {
  try {
    // 如果是点击所有书籍，清空搜索关键字
    if (isAllBooks) {
      searchKeyword.value = ''
    }
    
    const response = await request.get('/api/books', {
      params: {
        keyword: searchKeyword.value
      }
    })
    if (response.data.code === 200) {
      if (!response.data.data || response.data.data.length === 0) {
        randomBooks.value = []
        newBooks.value = []
        return
      }
      const books = response.data.data.map(book => ({
        id: book.id,
        title: book.book_name,
        author: book.book_author,
        cover: book.book_img ? book.book_img : '/book-fengmian.png',
      }))
      
      // 将获取的图书数据分配到随机推荐和新书推荐
      randomBooks.value = books.slice(0, 6)
      newBooks.value = books.slice(6)
    }
  } catch (error) {
    console.error('获取图书列表失败:', error)
  }
}

// 处理搜索事件
const handleSearch = () => {
  getBookList()
}

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token')
  router.push('/login')
}

// 获取统计数据
const getStats = async () => {
  try {
    const response = await request.get('/api/stats')
    if (response.data.code === 200) {
      stats.value = response.data.data
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 组件挂载时获取图书数据和统计数据
onMounted(() => {
  getBookList()
  getStats()
})
</script>

<template>
  <div class="book-manager">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div id="rain-container" class="rain-background">
          <RainScene :targetId="'rain-container'"
            v-bind="rainParams" />
      </div>
      <div class="header-section">
        <div class="header-left">
          <span class="title">Shu JiaZi</span>
        </div>
        <div class="search-box">
          <el-input v-model="searchKeyword" placeholder="搜索" prefix-icon="el-icon-search" />
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
        <div class="header-right">
          <el-button type="primary" text @click="() => showHeaderPanel = !showHeaderPanel">
            <span>雨滴设置</span>
          </el-button>
          <el-button type="primary" text @click="handleLogout">
            <span>退出登录</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div id="sidebar-rain" class="rain-background">
          <RainScene :targetId="'sidebar-rain'"
            v-bind="rainParams" />
        </div>
        <!-- <div class="sidebar-item active">
          <el-icon><el-icon-house /></el-icon>
          <span>首页</span>
        </div> -->
        <div class="sidebar-section">
          <div class="section-title">分类浏览</div>
          <div class="sidebar-item" @click="getBookList(true)">
            <el-icon><el-icon-files /></el-icon>
            <span>所有书籍</span>
            <span class="count">{{ stats.bookCount }}</span>
          </div>
          <!-- <div class="sidebar-item">
            <el-icon><el-icon-edit-pen /></el-icon>
            <span>出版社</span>
            <span class="count">1519</span>
          </div> -->
          <div class="sidebar-item" @click="$router.push('/authors')">
            <el-icon><el-icon-user /></el-icon>
            <span>作者</span>
            <span class="count">{{ stats.authorCount }}</span>
          </div>
          <div class="sidebar-item" @click="$router.push('/tags')">
            <el-icon><el-icon-price-tag /></el-icon>
            <span>标签</span>
            <span class="count">{{ stats.tagCount }}</span>
          </div>
          <!-- <div class="sidebar-item">
            <el-icon><el-icon-collection /></el-icon>
            <span>丛书</span>
          </div>
          <div class="sidebar-item">
            <el-icon><el-icon-star /></el-icon>
            <span>评分</span>
          </div> -->
          <!-- <div class="sidebar-item">
            <el-icon><el-icon-trend-charts /></el-icon>
            <span>热度榜单</span>
          </div>
          <div class="sidebar-item">
            <el-icon><el-icon-time /></el-icon>
            <span>最近更新</span>
          </div> -->
        </div>
        <!-- <div class="sidebar-section">
          <div class="section-title">友情链接</div>
          <div class="sidebar-item">芒果读书</div>
          <div class="sidebar-item">文津阁</div>
          <div class="sidebar-item">京东书店</div>
          <div class="sidebar-item">夜读客</div>
          <div class="sidebar-item">万千合集</div>
          <div class="sidebar-item">蜻蜓搜索</div>
        </div> -->
        <div class="sidebar-section">
          <div class="section-title">系统</div>
          <div class="sidebar-item">
            <el-icon><el-icon-refresh-right /></el-icon>
            <span>最后更新</span>
            <span class="date">2019-10-31</span>
          </div>
          <!-- <div class="sidebar-item">
            <el-icon><el-icon-user /></el-icon>
            <span>用户数</span>
            <span class="count">1182</span>
          </div> -->
          <!-- <div class="qrcode">
            <img src="/public/sg.jpeg" alt="QR Code" class="qr-image" />
          </div> -->
        </div>
      </div>

      <!-- 书籍展示区域 -->
      <div class="book-content">
        <!-- 雨滴设置弹窗 -->
        <el-dialog v-model="showHeaderPanel" title="雨滴效果设置" width="400px" class="rain-settings-dialog">
          <div class="rain-settings">
            <el-form label-position="left" label-width="100px">
              <el-form-item label="雨滴强度">
                <el-slider v-model="rainParams.intensity" :min="0" :max="1" :step="0.1" />
              </el-form-item>
              <el-form-item label="下落速度">
                <el-slider v-model="rainParams.speed" :min="0" :max="2" :step="0.1" />
              </el-form-item>
              <el-form-item label="整体亮度">
                <el-slider v-model="rainParams.brightness" :min="0" :max="1" :step="0.1" />
              </el-form-item>
              <el-form-item label="法线强度">
                <el-slider v-model="rainParams.normal" :min="0" :max="1" :step="0.1" />
              </el-form-item>
              <el-form-item label="缩放系数">
                <el-slider v-model="rainParams.zoom" :min="1" :max="5" :step="0.1" />
              </el-form-item>
              <el-form-item label="模糊强度">
                <el-slider v-model="rainParams.blurIntensity" :min="0" :max="1" :step="0.1" />
              </el-form-item>
              <el-form-item label="模糊迭代">
                <el-slider v-model="rainParams.blurIterations" :min="1" :max="32" :step="1" />
              </el-form-item>
              <el-form-item label="画面平移">
                <el-switch v-model="rainParams.panning" />
              </el-form-item>
              <el-form-item label="后期处理">
                <el-switch v-model="rainParams.postProcessing" />
              </el-form-item>
              <el-form-item label="闪电效果">
                <el-switch v-model="rainParams.lightning" />
              </el-form-item>
              <el-form-item label="纹理填充">
                <el-switch v-model="rainParams.textureFill" />
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
        <!-- 随便推荐 -->
        <div class="book-section">
          <div class="section-header">
            <h2 class="section-title">列表</h2>
            <el-button type="primary" @click="router.push('/add-book')">添加图书</el-button>
          </div>
          <div class="book-grid">
            <div v-for="book in randomBooks" :key="book.id" class="book-card" @click="router.push(`/book/${book.id}`)">

              <div class="book-cover">
                <img :src="book.cover" :alt="book.title" />
              </div>
              <div class="book-info">
                <div class="book-title">《{{ book.title }}》</div>
                <div class="book-author">作者：{{ book.author }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.book-manager {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background: rgba(255, 255, 255, 0.027) url('/page-bg.png') no-repeat center center;
  background-size: cover;
  color: #333;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  /* background-color: rgba(39, 52, 240, 0.151); */
  backdrop-filter: blur(10px);
  /* -webkit-backdrop-filter: blur(10px); */
  /* color: white; */
  /* padding: 0 20px; */
}

.header-left {
  display: flex;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  color: rgb(9, 235, 197);
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
  animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #ff4da6, 0 0 30px #ff4da6, 0 0 40px #ff4da6;
  }
}

.search-box {
  width: 300px;
  display: flex;
  gap: 10px;
}

.search-box .el-input {
  flex: 1;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background-color: rgba(39, 52, 240, 0.151);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 0;
  overflow-y: auto;
  position: relative;
}

.rain-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.header-section {
  display: flex;
  position: relative;
  z-index: 1;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.sidebar-section {
  position: relative;
  z-index: 1;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
  position: relative;
}

.sidebar-item:hover {
  background-color: #f5f5f5;
}

.sidebar-item.active {
  background-color: #e3f2fd;
  color: #1976d2;
}

.sidebar-item .el-icon {
  margin-right: 8px;
}

.count, .date {
  position: absolute;
  right: 15px;
  color: #999;
}

.sidebar-section {
  margin-bottom: 20px;
}

.section-title {
  padding: 8px 15px;
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qrcode {
  padding: 15px;
  text-align: center;
}

.qr-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.book-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.book-section {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.book-section .section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding: 0;
  margin: 0;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

.book-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.book-cover {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.book-card:hover .book-cover img {
  transform: scale(1.05);
}

.book-info {
  padding: 12px 15px;
  background: #fff;
}

.book-title {
  font-weight: bold;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-author {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rain-settings-dialog {
  position: relative;
  z-index: 2000;
}

.rain-settings-dialog :deep(.el-dialog) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.rain-settings-dialog :deep(.el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.rain-settings-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.rain-settings-dialog :deep(.el-form-item) {
  margin-bottom: 20px;
}

.rain-settings-dialog :deep(.el-slider__runway) {
  background-color: rgba(0, 0, 0, 0.1);
}

.rain-settings-dialog :deep(.el-slider__bar) {
  background-color: #409EFF;
}

.rain-settings-dialog :deep(.el-switch__core) {
  border-color: rgba(0, 0, 0, 0.1);
}
</style>
